<!--
 * @Author: 詹真琦(legendryztachi@gmail.com)
 * @Date: 2022-06-20 17:37:49
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @LastEditTime: 2022-08-23 21:07:26
 * @FilePath: \code\ctp-static-portal-front\src\components\tabs\content-panel.vue
 * @Description: 内容
-->
<template>
  <div class="content-portal" :style="ownStyle || containerStyle">
    <component
      :data-file="sectionData.dataFile"
      v-if="sectionData.data"
      :is="name"
      :sectionStyle="sectionThemeData.sectionTheme"
      :sectionThemeData="sectionThemeData"
      :sectionData="sectionData"
      :categoryList="sectionData.data.categoryList || []"
      :contentWidth="contentWidth"
      :entityId="panel.entityId"
      :template="template"
      :withBorder="withBorder"
      :dataList="sectionData.data.rows"
    />
  </div>
</template>
<script>
  /*
   * 工作区组件,动态生成工作区域
   * */
  // import components from "@/components/@/components/common/importComponents";
  import FooterArea from '@/components/footerArea';
  import Login from '@/components/login';
  import LoginDetail from '@/components/login/login-detail';
  import LoginDetailIfra from '@/components/login/login-detail-ifra';
  import Logo from '@/components/logo';
  //import MagnetGroup from "@/components/magnetGroup";
  import News from '@/components/news';
  import Notices from '@/components/notices';
  import PublicBoard from '@/components/publicBoard';
  import ComposeTabs from '@/components/tabs/compose-tabs';
  import Nav from '@/components/tabs/components/nav';
  import TimeLine from '@/components/time-line';
  import Vide from '@/components/vide';
  import Weather from '@/components/weather';
  import Banner from '@/components/Banner';
  import Slideshow from '@/components/news/components/slideshow';
  import ColumnMagnet from '@/components/columnMagnet';
  import Magnet from '@/components/Magnet';
  import SpaceNav from '@/components/space-nav';
  import PicBanner from '@/components/pic-banner';
  import LoginSection from '@/components/login/loginSection';
  import LoginContainer from '@/components/login/loginContainer';
  import Bulletin from '@/components/Bulletin';
  import AsyncComponent from '@/components/Custom/AsyncComponent';
  import getComponentName from '@/common/componetsMap';

  //缓存一下
  const cacheData = {};
  export default {
    name: 'ContentPanel',
    components: {
      Bulletin,
      LoginSection,
      FooterArea,
      Login,
      LoginDetail,
      LoginDetailIfra,
      Logo,
      News,
      Notices,
      PublicBoard,
      ComposeTabs,
      Nav,
      TimeLine,
      Vide,
      Weather,
      Slideshow,
      ColumnMagnet,
      Magnet,
      SpaceNav,
      PicBanner,
      Banner,
      LoginContainer,
      AsyncComponent
    },
    props: {
      containerStyle: {
        type: Object
      },
      sectionThemeData: {
        type: Object,
        default: () => ({})
      },
      sectionData: {
        type: Object
      },
      contentWidth: {
        type: Number
      },
      panel: {
        type: Object
      },
      withBorder: {
        type: Boolean
      },
      setSectionData: {
        type: Function
      }
    },
    data() {
      return {
        //渲染栏目组件名
        name: '',
        ownStyle: null,
        template: ''
      };
    },
    created() {
      // const currentSpaceId = vPortal.currentSpace?.id
      this.template = this.panel.templateName || this.panel.template;
      // this.template = "custom-groupNewsSection";
      this.name = getComponentName(this.template);
      // test
      // const { entityId, template } = this.panel;
      // const url = `${_basePath}/loginPortal/${currentSpaceId}/${template}/${entityId}.json`;
      // if (this.sectionData.data.rowsFile) {
      // }
      if (this.sectionData.dataFile) {
        const url = `${this.sectionData.dataFile}`;
        //有缓存取缓存的
        // const cache = cacheData[url];
        // if (cache) {
        //   this.setData(this.sectionData, cache);
        //   return;
        // }
        $.getJSON(url, (data) => {
          switch (this.panel.template) {
            //图片新过滤下
            case 'groupImageNewsSection':
            case 'imageNewsSection':
              data.rowsFull = data.rows.slice();
              data.rows = data.rows.filter((d) => d.imageNews);
              break;
            case 'groupFocusNewsSection':
            case 'focusNewsSection':
              data.rowsFull = data.rows.slice();
              data.rows = data.rows.filter((d) => d.focus);

            default:
              data.rows = data.rows;
          }
          this.setSectionData(data);
          //缓存
          // cacheData[url] = data;
          //设置一些覆盖样式
          this.setOwnStyle(data);
        }).error(function (jqXHR, textStatus, errorThrown) {
          console.log(`请求错误--->${url}`, jqXHR, textStatus, errorThrown);
        });
      }
    },
    methods: {
      /**
       * @description: 设置栏目覆盖样式
       * @param {Object} data 栏目数据
       * @return {*}
       */
      setOwnStyle(data) {
        const { resolveFunction } = data;
        const { scrollBGColor } = this.sectionData.options;
        switch (resolveFunction) {
          //公告滚动样式这样
          case 'singleScrollTemplete':
          case 'singleScrollTempleteNormal':
            if (scrollBGColor) {
              this.ownStyle = {
                backgroundColor: scrollBGColor,
                borderRadius: '5px'
              };
            }
        }
      }
    }
  };
</script>
